import Toolbar from "../Toolbar"
import { Button, Checkbox, Popover, Space, Table, TableProps, Tooltip } from "antd"
import './index.less'
import { useEffect, useMemo, useState } from "react"
import { ColumnsType } from "antd/lib/table";
import useZoomIn from "../useZoomIn";
import { ControlOutlined, FullscreenExitOutlined, FullscreenOutlined, ReloadOutlined } from "@ant-design/icons";
interface ProColumnsType<T> extends ColumnsType<T> {
    hidden?: boolean
    enumValue?: boolean
}
interface ProTableProps extends TableProps<any> {
    columns?: ProColumnsType<any>;
    refresh?: Function
}
const ProTable = ({ dataSource, refresh, columns }: ProTableProps) => {
    const { style, isZoomIn, toogle } = useZoomIn()
    const [showColumns, setShowColumns] = useState<any>({});
    useEffect(() => {
        const con = JSON.parse(localStorage.getItem('key'))
        if (con) {

            setShowColumns({ ...con })
        }

    }, [])
    const columns2 = useMemo(() => {
        return columns.filter((v: any, index) => {
            const key = v.key || v.dataIndex

            if (v.hidden2 || typeof showColumns[key] !== 'undefined') {
                return showColumns[key];
            }
            return !v.hidden
        }).map((item: any) => {
            if (!item.align) {
                item.align = 'center'
            }
            if (item.enumValue) {
                item.render = (value) => {
                    return item.enumValue[value]
                }
            }
            return item
        })
    }, [columns, showColumns])
    const content = () => {

        return <div>{
            columns.filter((v: any) => !v.hidden).map((item: any) => {
                const key = item.key || item.dataIndex

                let checked = true;
                if (item.hidden2 || typeof showColumns[key] !== 'undefined') {
                    checked = showColumns[key]
                }
                return <Checkbox onChange={e => {
                    showColumns[key] = e.target.checked;
                  
                    localStorage.setItem('key', JSON.stringify(showColumns))
                    setShowColumns({ ...showColumns })
                }} checked={checked} key={key}>{item.title}</Checkbox>
            })
        }</div>
    }
    const TitleRender = ()=>{
        return <Toolbar
        style={{padding:0}} 
        right={<Space style={{ fontSize: 18 }}>

            <Tooltip title='刷新'>
                <ReloadOutlined onClick={refresh as any} />
            </Tooltip>
            <Tooltip title={isZoomIn ? '退出满屏' : '满屏'}>
                {isZoomIn ? <FullscreenOutlined onClick={toogle} /> : <FullscreenExitOutlined onClick={toogle} />}
            </Tooltip>
            <Popover placement='bottomRight' content={content} title="列设置" trigger="click">
                <Tooltip title='列设置'>
                    <ControlOutlined />
                </Tooltip>
            </Popover>
        </Space>}
        left={<Button type='primary'>新建</Button>} />
    }
    return <Table
         
        dataSource={dataSource}
        style={{ ...style }}
        columns={columns2}
        className="pro-table-container"
        size='small'
        title={()=><TitleRender/>}

    />
}
export default ProTable